<template>
    <el-row>
        <el-col :span="12">
            <div id="line" style="width:100%;height:350px;"></div>
        </el-col>
        <el-col :span="12">
            <ul class="evaluation-list">
                <li>
                  <p class="title clearfix"><span>专利质量</span><span>{{assessment.vprogress1}}/100</span></p>
                  <!-- <v-progress-linear class="vprogress" height="10" color="#2f41c8" background-color="#e9e9fc" v-model="vprogress1"></v-progress-linear> -->
                  <el-progress :show-text="false" :percentage="assessment.vprogress1" color="#504caa"></el-progress>
                  <p class="footer-tip">是从特征数量、权项数量、引用情况、稳定性等10个维度对专利质量进行评价</p>
                </li>
                <li>
                  <p class="title clearfix"><span>技术价值</span><span>{{assessment.vprogress2}}/100</span></p>
                  <!-- <v-progress-linear class="vprogress" height="10" color="#2f41c8" background-color="#e9e9fc" v-model="vprogress2"></v-progress-linear> -->
                   <el-progress :show-text="false" :percentage="assessment.vprogress2" color="#504caa"></el-progress>
                  <p class="footer-tip">是从创新程度、技术时效、技术宽度、生命周期维度评价专利技术价值</p>
                </li>
                <li>
                  <p class="title clearfix"><span>市场价值</span><span>{{assessment.vprogress3}}/100</span></p>
                  <!-- <v-progress-linear class="vprogress" height="10" color="#2f41c8" background-color="#e9e9fc" v-model="vprogress3"></v-progress-linear> -->
                   <el-progress :show-text="false" :percentage="assessment.vprogress3" color="#504caa"></el-progress>
                  <p class="footer-tip">是从投融资情况、行业基数、转让许可、质押融资、市场势能等维度评价市场价值</p>
                </li>
                <li>
                  <p class="title clearfix"><span>社会价值</span><span>{{assessment.vprogress4}}/100</span></p>
                  <!-- <v-progress-linear class="vprogress" height="10" color="#2f41c8" background-color="#e9e9fc" v-model="vprogress4"></v-progress-linear> -->
                   <el-progress  :show-text="false" :percentage="assessment.vprogress4" color="#504caa"></el-progress>
                  <p class="footer-tip">是从复审无效、焦点事件、政策法规等维度评价专利的社会价值</p>
                </li>
              </ul>
        </el-col>
    </el-row>
</template>
<script>
import axios from 'axios'
import resize from '@/utils/resize'
export default {
    mixins:[resize],
    data(){
        return {
            companyName:this.$route.query.name,
            chart:null,
            assessment:{
                vprogress1:0,
                vprogress2:0,
                vprogress3:0,
                vprogress4:0
            },
            dateVal:'',
            valueChartOne:{
                appApdObject:{
                    list:[],
                    types:[]
                },
                appIsdObject:{
                    list:[],
                    types:[]
                }
            },
        }
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    mounted(){
        this.dateVal = this.$DateManag()
        this.chart = this.$echarts.init(document.getElementById('line'),'macarons')
        this.init()
        this.getTrendsData()
    },
    methods:{
        trendsData(fieldType) {
            return this.$post(this.$Url.analysis.queryAggs, {
                companyName: this.companyName,
                musts: {
                date_sort: '1'
                },
                rangArr: [
                {
                    start: this.dateVal.start,
                    end: this.dateVal.end,
                    field: fieldType
                }
                ],
                aggs: {
                size: '',
                interval: 'YEAR',
                format: 'yyyy',
                field: fieldType, // ad:申请日 isd:公开日
                type: 'date'
                }
            })
        },
        getTrendsData() {
            let start = Number(this.dateVal.start.substring(0,4))
            let end = Number(this.dateVal.end.substring(0,4))
            axios.all([this.trendsData('ad'), this.trendsData('isd')])
            .then(axios.spread((res1, res2) => {
                let solid =[]
                let solid2 = []
                let x = []
                for(let i =start ;i<=end;i++){
                    x.push(i)
                    let count = 0 
                    let count2 = 0
                    for(let o = 0;o<res1.data.length;o++){
                        if(i== res1.data[o].key_as_string){
                            count = res1.data[o].doc_count
                        }
                    }
                    solid.push(count)
                    for(let e=0;e<res2.data.length;e++){
                        if(i== res2.data[e].key_as_string){
                            count2 = res2.data[e].doc_count
                        }
                    }
                    solid2.push(count2)
                }
                x.push(end)
                this.getChart(solid,solid2,x)
            }))
        },
        getChart(solid,solid2,x){
            let arr = ['-','-','-','-','-','-','-','-']
            let spliceSolid = solid.slice(0,9)
            let spliceSolid2 = solid2.slice(0,9)
            let dotted = []
            let dotted2 = []
            if(solid[solid.length-1]==0){
                dotted=arr.concat(solid[8]).concat(solid[8])
            }else{
               dotted=arr.concat(solid[8]).concat(solid[9]) 
            }

            if(solid2[solid2.length-1]==0){
                dotted2=arr.concat(solid2[8]).concat(solid2[8])
            }else{
                dotted2=arr.concat(solid2[8]).concat(solid2[9])
            }
            this.chart = this.$echarts.init(document.getElementById("line"),'macarons')
            this.chart.setOption({
                tooltip: {
                confine: true,
                trigger: "axis",
                backgroundColor: "#fff",
                extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);",
                borderRadius: 0,
                padding: 5,
                textStyle: {
                    color: "#000"
                },
                axisPointer: { type: "none" },
                formatter: function (params, ticket, callback) {
                    var htmlStr = '';
                    var valMap = {};
                    for(var i=0;i<params.length;i++){
                    var param = params[i];
                    var xName = param.name;//x轴的名称
                    var seriesName = param.seriesName;//图例名称
                    var value = param.value;//y轴值
                    var color = param.color;//图例颜色
                    //过滤无效值
                    if(value == '-'){
                        continue;
                    }
                    //过滤重叠值
                    if(valMap[seriesName] == value){
                        continue;
                    }
                    if(i===0){
                        htmlStr += xName + '<br/>';//x轴的名称
                    }
                    htmlStr +='<div>';
                    //为了保证和原来的效果一样，这里自己实现了一个点的效果
                    htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:'+color+';"></span>';
                    //圆点后面显示的文本
                    htmlStr += seriesName + '：' + value;
                    htmlStr += '</div>';
                    valMap[seriesName] = value;
                    }
                    return htmlStr;
                }
                },
                legend: {
                type: "scroll",
                data: ['申请日数量', '公开日数量'],
                bottom: 0,
                left: "5%",
                right: "5%"
                },
                xAxis: [
                {
                    data:x.slice(0,10),
                    type: 'category',
                    axisLine:{
                        lineStyle:{
                        color: '#e7e8ec'
                        }
                    },
                    boundaryGap: false,
                    axisLabel:{
                        color: '#888797'
                    },
                    splitLine:{
                        show:true,
                        lineStyle :{
                            type: 'dashed'
                        }
                    },
                    splitArea: {
                        show: false 
                    },
                    axisTick:{
                        show: false
                    }
                },{
                    type: 'category',
                    axisLine:{
                        lineStyle:{
                        color: '#e7e8ec'
                        }
                    },
                    axisLabel:{
                        color: '#888797'
                    },
                    splitLine:{
                        show:true,
                        lineStyle :{
                            type: 'dashed'
                        }
                    },
                    splitArea: {
                        show: false 
                    },
                    axisTick:{
                        show: true
                    }
                }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLine:{
                            lineStyle:{
                            color: '#e7e8ec'
                            }
                        },
                        axisLabel:{
                            color: '#888797'
                        },
                        splitLine:{
                            lineStyle :{
                                type: 'dashed'
                            }
                        },
                        splitArea: {
                            show: false 
                        },
                        axisTick:{
                            show: false
                        }
                    },
                    {
                        type: 'value',
                        axisLine:{
                            lineStyle:{
                            color: '#e7e8ec'
                            }
                        },
                        axisLabel:{
                            show:false,
                            color: '#888797'
                        },
                        splitLine:{
                            show:false,
                            lineStyle :{
                                type: 'dashed'
                            }
                        },
                        splitArea: {
                            show: false 
                        },
                        axisTick:{
                            show: false
                        }
                    }
                ],
                series: [
                {
                    name: '申请日数量',
                    type: "line",
                    data: spliceSolid,
                    type: 'line',
                    symbolSize:8,
                    itemStyle:{
                        normal:{
                            // 拐点上显示数值
                            label : {
                            show: false
                            },
                            borderColor:'fff',  // 拐点边框颜色
                            borderWidth: '2',
                            lineStyle:{                 
                                width:2,  // 设置线宽
                                type:'solid'  //'dotted'虚线 'solid'实线
                            }
                        }
                    },
                    symbol:'circle',
                    smooth: false
                },
                {
                    name: '申请日数量', //虚线
                    type: "line",
                    data: dotted,
                    type: 'line',
                    symbolSize:8,
                    itemStyle:{
                        normal:{
                            // 拐点上显示数值
                            label : {
                            show: false
                            },
                            borderColor:'fff',  // 拐点边框颜色
                            borderWidth: '2',
                            lineStyle:{                 
                                width:2,  // 设置线宽
                                type:'dotted'  //'dotted'虚线 'solid'实线
                            }
                        }
                    },
                    symbol:'circle',
                    smooth: false
                },
                {
                    name: '公开日数量',
                    type: "line",
                    data: spliceSolid2,
                    symbolSize:8,
                    itemStyle:{
                        normal:{
                            // 拐点上显示数值
                            label : {
                            show: false
                            },
                            borderColor:'fff',  // 拐点边框颜色
                            borderWidth: '2',
                            lineStyle:{                 
                                width:2,  // 设置线宽
                                type:'solid'  //'dotted'虚线 'solid'实线
                            }
                        }
                    },
                    symbol:'circle',
                    smooth: false,
                },
                {
                    name: '公开日数量', //虚线
                    type: "line",
                    data: dotted2,
                    smooth: true,
                    type: 'line',
                    symbolSize:8,
                    itemStyle:{
                        normal:{
                            // 拐点上显示数值
                            label : {
                            show: false
                            },
                            borderColor:'fff',  // 拐点边框颜色
                            borderWidth: '2',
                            lineStyle:{                 
                                width:2,  // 设置线宽
                                type:'dotted'  //'dotted'虚线 'solid'实线
                            }
                        }
                    },
                    symbol:'circle',
                    smooth: false,
                
                }],
            })
        },
        init(){
            this.$get(this.$Url.science.direction, {
                companyName: this.companyName,
                dataType:'patentAnalysis'
            }).then(data => {
                let complexDetail = data.data.patentAnalysis.complexEchart.complexDetail
                if(complexDetail.patentScoreavg){
                    // 专利质量
                    this.assessment.vprogress1 = Number(complexDetail.patentScoreavg.Q)
                    // 技术价值
                    this.assessment.vprogress2 = Number(complexDetail.patentScoreavg.T)
                    // 市场价值
                    this.assessment.vprogress3 = Number(complexDetail.patentScoreavg.M)
                    // 社会价值
                    this.assessment.vprogress4 = Number(complexDetail.patentScoreavg.S)
                }
            }).catch(e=>{console.log(e)})
            
            
            /* this.chart.setOption({
                title: {
                    x: '20px',
                    y: '5%',
                    textStyle:{
                        fontSize: 14,
                        color: '#505058',
                        fontWeight: 'bold' 
                    }
                },
                tooltip: { 
                     
                },
                legend:{
                    show: true,
                    icon: "roundRect",
                    left:160,
                    top:20
                },
                grid: {
                    left: '60',
                    right: '60',
                    bottom: '8%',
                    containLabel: true
                },
                xAxis: [
                    {
                        data:  ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                        type: 'category',
                        axisLine:{
                            lineStyle:{
                            color: '#e7e8ec'
                            }
                        },
                        boundaryGap: false,
                        axisLabel:{
                            color: '#888797'
                        },
                        splitLine:{
                            show:true,
                            lineStyle :{
                                type: 'dashed'
                            }
                        },
                        splitArea: {
                            show: false 
                        },
                        axisTick:{
                            show: false
                        }
                    },{
                        type: 'category',
                        axisLine:{
                            lineStyle:{
                            color: '#e7e8ec'
                            }
                        },
                        axisLabel:{
                            color: '#888797'
                        },
                        splitLine:{
                            show:true,
                            lineStyle :{
                                type: 'dashed'
                            }
                        },
                        splitArea: {
                            show: false 
                        },
                        axisTick:{
                            show: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLine:{
                            lineStyle:{
                            color: '#e7e8ec'
                            }
                        },
                        axisLabel:{
                            color: '#888797'
                        },
                        splitLine:{
                            lineStyle :{
                                type: 'dashed'
                            }
                        },
                        splitArea: {
                            show: false 
                        },
                        axisTick:{
                            show: false
                        }
                    },
                    {
                        type: 'value',
                        axisLine:{
                            lineStyle:{
                            color: '#e7e8ec'
                            }
                        },
                        axisLabel:{
                            show:false,
                            color: '#888797'
                        },
                        splitLine:{
                            show:false,
                            lineStyle :{
                                type: 'dashed'
                            }
                        },
                        splitArea: {
                            show: false 
                        },
                        axisTick:{
                            show: false
                        }
                    }
                ],
                series: [
                    {
                        name:'专利数量',
                        areaStyle:{
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: '#9d9edf' // 0% 处的颜色
                                },{
                                    offset: 1, color: 'transparent' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            }
                        },
                        data: [820, 932, 901, 934, 1290, 1330, 1320],
                        type: 'line',
                        symbolSize:8,
                        itemStyle:{
                            normal:{
                                // 拐点上显示数值
                                label : {
                                show: true
                                },
                                borderColor:'fff',  // 拐点边框颜色
                                borderWidth: '2',
                                lineStyle:{                 
                                    width:2,  // 设置线宽
                                    type:'solid'  //'dotted'虚线 'solid'实线
                                }
                            }
                        },
                        symbol:'circle',
                        smooth: 'none'
                    }
                ]
            }) */
        }
    }
}
</script>
<style lang="scss" scoped>
.evaluation-list {
  margin-right: 20px;
  padding-top:30px;
  list-style: none;
}
.evaluation-list .title {
  position: relative;
  margin-bottom: 0;
  line-height:40px;
  font-size:16px;
  padding-left:10px;
}
.evaluation-list .title span {
  float: left;
  display: block;
  font-weight: 600;
  font-size: 12px;
  color: #241c75;
}
.evaluation-list .title span:last-child {
  float: right;
}
.evaluation-list .vprogress {
  height: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  border-radius: 10px;
}

.evaluation-list .footer-tip {
  font-size: 12px;
  color: #9492a7;
  text-align:left;
  padding-left:10px;
  line-height:30px;
}
</style>